<template>
  <div>
    <!--多个按钮-->
    <el-space wrap>
      <span
        v-for="(item, key) in buttonMeta.btnOrder"
        :key="'btn_'+ key"
      >
        <nf-button-delete
          v-if="buttonMeta.itemMeta[item].btnKind === 'delete'"
          :moduleId="moduleId"
          :buttonMeta="buttonMeta.itemMeta[item]"
        >
        </nf-button-delete>
        <nf-button-dialog
          v-else
          :moduleId="moduleId"
          :buttonMeta="buttonMeta.itemMeta[item]"
          :dialogInfo="dialogInfo[item]"
        >
        </nf-button-dialog>
      </span>
    </el-space>
  </div>
</template>

<script>
/* eslint-disable import/no-absolute-path */
import { reactive } from 'vue'
// 轻量级状态
import { state } from 'nf-state'

// 新的列表页面的管理类
import dataListManage from '../../controller/state-list.js'
import { getList } from '../../controller/data-list-controller.js'

// 两个按钮组件
import nfButtonDialog from './button-form.vue'
import nfButtonDelete from './button-delete.vue'
</script>

<script setup>

// 属性：模块ID
const props = defineProps({
  moduleId: [Number, String]
})

// 子组件里面获取状态
const dataListState = getList()

// 按钮的meta
const buttonMeta = state.projectMeta.module[props.moduleId].button

// 弹窗信息
const dialogInfo = reactive({})

buttonMeta.btnOrder.forEach(id => {
  dialogInfo[id] = {
    isShow: false,
    width: '50%'
  }
})

// 记录快捷键和按钮key
const btnHotKey = {}
for (const key in buttonMeta.itemMeta) {
  const meta = buttonMeta.itemMeta[key]
  meta.events = {}
  meta.events.buttonClick = () => {}
  btnHotKey[meta.hotkey] = key // [a] = id
}

// 设置快捷键
dataListState.hotkey = (key) => {
  if (key === 'Alt') return
  const btnId = btnHotKey[key]
  console.log('btnId', btnId)
  if (typeof btnId === 'undefined') return // 没有这个快捷键
  // 根据按钮ID触发对应的事件
  buttonMeta.itemMeta[btnId].events.buttonClick()
}
</script>
